import { useState } from "react";
import { Tooltip, List } from "antd";

import { getDisasterData } from "../config";

import styles from "../styles/disaster.module.css";

const Disaster = () => {
  const [data, setData] = useState(getDisasterData());

  return (
    <List
      grid={{ gutter: 0, column: 2 }}
      dataSource={data}
      renderItem={(item) => (
        <List.Item className={styles.listItem}>
          <Tooltip title={item.name}>
            <span className={styles.name}>{item.name}</span>
          </Tooltip>
          <span className={styles.count}>：{item.count}</span>
        </List.Item>
      )}
    />
  );
};

export default Disaster;
